<template>
    <div>
        <el-card class="drawer-card">
            <div class="inner-drawer-card">
                <div slot="header" class="header-card">
                    <span>基本情况</span>
                </div>
                <div class="header-content">
                    <el-row>
                        <el-col :span="16">
                            项目名称：
                            <el-input v-model="baseInfoForm.projectName"></el-input>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            责任部门：
                            <el-input v-model="baseInfoForm.managerDeptId"></el-input>
                        </el-col>
                    </el-row>
                    <br />
                    <el-row>
                        <el-col :span="16">
                            主要目标：
                            <el-input v-model="baseInfoForm.mainTarget"></el-input>
                        </el-col>
                        <el-col :span="3" :offset="1">
                            结束时间：
                            <el-date-picker v-model="baseInfoForm.projectEndTime" type="date" placeholder="选择日期"> </el-date-picker>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <br />
            <br />
            <!--下方表格-->
            <div>
                <el-row>
                    <el-col :span="5">
                        <div class="inner-drawer-card">
                            <div slot="header" class="header-card">
                                <span>成员</span>
                                <el-button type="warning" style="margin-left: 10px" @click="addMemberDialog">新增</el-button>
                            </div>
                            <div>
                                <el-table :data="memberData" style="width: 100%" border="" :key="Math.random()">
                                    <el-table-column prop="number" label="序号"> </el-table-column>
                                    <el-table-column prop="name" label="姓名"> </el-table-column>
                                    <el-table-column label="操作" width="150">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="primary" @click="editMember(scope.row.number)">编辑</el-button>
                                            <el-button size="mini" type="danger" @click="deleteMember(scope.row.number)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <div class="inner-drawer-card">
                            <div slot="header" class="header-card">
                                <span>工作/任务</span>
                                <el-button type="warning" style="margin-left: 10px" @click="addtaskDialog">新增</el-button>
                            </div>
                            <div>
                                <el-table :data="workData" style="width: 100%" border="" :key="Math.random()">
                                    <el-table-column prop="number" label="序号"> </el-table-column>
                                    <el-table-column prop="name" label="名称" width="200"> </el-table-column>
                                    <el-table-column label="时间">
                                        <template slot-scope="scope"> {{ scope.row.startTime }}-{{ scope.row.endTime }} </template>
                                    </el-table-column>
                                    <el-table-column prop="manager" label="负责人"> </el-table-column>
                                    <el-table-column label="操作" width="150">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="primary" @click="editTask(scope.row.number)">编辑</el-button>
                                            <el-button size="mini" type="danger" @click="deleteTask(scope.row.number)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="7" :offset="1">
                        <div class="inner-drawer-card">
                            <div slot="header" class="header-card">
                                <span>资金</span>
                                <el-button type="warning" style="margin-left: 10px" @click="addMoneyDialog">新增</el-button>
                            </div>
                            <div>
                                <el-table :data="moneyData" style="width: 100%" border="" :key="Math.random()">
                                    <el-table-column prop="number" label="序号"> </el-table-column>
                                    <el-table-column prop="financeName" label="名称"> </el-table-column>
                                    <el-table-column prop="financeMoney" label="金额"> </el-table-column>
                                    <el-table-column label="操作" width="150">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="primary" @click="editMoney(scope.row.number)">编辑</el-button>
                                            <el-button size="mini" type="danger" @click="deleteMoney(scope.row.number)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <br />
            <br />
            <div>
                <el-button type="success" @click="addReport">更改保存</el-button>
                <el-button type="info" @click="back">返回</el-button>
            </div>
        </el-card>
        <!--添加成员弹框-->
        <el-dialog title="成员" :visible.sync="memberDialogVisible" width="30%" :append-to-body="true">
            <el-row>
                <el-col :span="6">
                    序号：
                    <el-input v-model="memberDialogForm.number"></el-input>
                </el-col>
                <el-col :span="6" :offset="1">
                    姓名：
                    <el-input v-model="memberDialogForm.name"></el-input>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="saveMember">保存</el-button>
                <el-button @click="cancelAddMember">取消</el-button>
            </span>
        </el-dialog>
        <!--修改成员弹框-->
        <el-dialog title="成员" :visible.sync="editmemberDialogVisible" width="30%" :append-to-body="true">
            <el-row>
                <el-col :span="6">
                    序号：
                    <el-input v-model="editMemberDialogForm.number"></el-input>
                </el-col>
                <el-col :span="6" :offset="1">
                    姓名：
                    <el-input v-model="editMemberDialogForm.name"></el-input>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="saveEditMember">保存</el-button>
                <el-button @click="cancelEditMember">取消</el-button>
            </span>
        </el-dialog>
        <!--添加任务/工作弹框-->
        <el-dialog title="工作/任务" :visible.sync="workDialogVisible" width="80%" append-to-body>
            <el-row>
                <el-col :span="2">
                    工作序号：
                    <el-input v-model="workDialogForm.number"></el-input>
                </el-col>
                <el-col :span="6" :offset="1">
                    工作名称：
                    <el-input v-model="workDialogForm.name"></el-input>
                </el-col>
                <el-col :span="2" :offset="1">
                    来源：
                    <el-select v-model="workDialogForm.type" placeholder="请选择">
                        <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3" :offset="1">
                    开始：
                    <el-date-picker v-model="workDialogForm.startTime" placeholder="选择月"> </el-date-picker>
                </el-col>
                <el-col :span="3" :offset="1">
                    结束：
                    <el-date-picker v-model="workDialogForm.endTime"  placeholder="选择月"> </el-date-picker>
                </el-col>
            </el-row>
            <br />
            <el-row>
                <el-col>
                    <el-col :span="24">
                        负责人：
                        <el-input v-model="workDialogForm.manager" placeholder="请按次序填写负责人姓名，用英文逗号分隔"></el-input>
                    </el-col>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="saveTask">保存</el-button>
                <el-button @click="cancelAddTask">取消</el-button>
            </span>
        </el-dialog>
        <!--修改任务/工作弹框-->
        <el-dialog title="工作/任务" :visible.sync="editTaskDialogVisible" width="80%" append-to-body>
            <el-row>
                <el-col :span="2">
                    工作序号：
                    <el-input v-model="editTaskDialogForm.number"></el-input>
                </el-col>
                <el-col :span="6" :offset="1">
                    工作名称：
                    <el-input v-model="editTaskDialogForm.name"></el-input>
                </el-col>
                <el-col :span="2" :offset="1">
                    来源：
                    <el-select v-model="editTaskDialogForm.type" placeholder="请选择">
                        <el-option v-for="item in sourceOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="3" :offset="1">
                    开始：
                    <el-date-picker v-model="editTaskDialogForm.startTime"  placeholder="选择月"> </el-date-picker>
                </el-col>
                <el-col :span="3" :offset="1">
                    结束：
                    <el-date-picker v-model="editTaskDialogForm.endTime"  placeholder="选择月"> </el-date-picker>
                </el-col>
            </el-row>
            <br />
            <el-row>
                <el-col>
                    <el-col :span="24">
                        负责人：
                        <el-input v-model="editTaskDialogForm.manager" placeholder="请按次序填写负责人姓名，用英文逗号分隔"></el-input>
                    </el-col>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="saveEditTask">保存</el-button>
                <el-button @click="cancelEditTask">取消</el-button>
            </span>
        </el-dialog>
        <!--添加资金弹框-->
        <el-dialog title="资金" :visible.sync="moneyDialogVisible" width="30%" :append-to-body="true">
            <el-row>
                <el-col :span="7">
                    序号：
                    <el-input v-model="moneyDialogForm.number"></el-input>
                </el-col>
                <el-col :span="7" :offset="1">
                    名称：
                    <el-input v-model="moneyDialogForm.financeName"></el-input>
                </el-col>
                <el-col :span="7" :offset="1">
                    金额(元)：
                    <el-input v-model="moneyDialogForm.financeMoney"></el-input>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="saveMoney">保存</el-button>
                <el-button @click="cancelAddMoney">取消</el-button>
            </span>
        </el-dialog>
        <!--修改资金弹框-->
        <el-dialog title="资金" :visible.sync="editMoneyDialogVisible" width="30%" :append-to-body="true">
            <el-row>
                <el-col :span="7">
                    序号：
                    <el-input v-model="editMoneyDialogForm.number"></el-input>
                </el-col>
                <el-col :span="7" :offset="1">
                    名称：
                    <el-input v-model="editMoneyDialogForm.financeName"></el-input>
                </el-col>
                <el-col :span="7" :offset="1">
                    金额(元)：
                    <el-input v-model="editMoneyDialogForm.financeMoney"></el-input>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" @click="saveEditMoney">保存</el-button>
                <el-button @click="cancelEditMoney">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment';
import reportFormsApi from '../../../../api/reportForms';
export default {
    props: {
        editInfo: Object
    },
    data() {
        return {
            sourceOptions: [
                {
                    value: '1',
                    label: 'A+'
                },
                {
                    value: '2',
                    label: 'A'
                },
                {
                    value: '3',
                    label: 'B'
                },
                {
                    value: '4',
                    label: 'C'
                }
            ],

            // 基本情况表单
            baseInfoForm: {},
            // 成员表格数据
            memberData: [],
            // 工作/任务表格数据
            workData: [],
            // 资金表格数据
            moneyData: [],
            // 成员弹框控制
            workDialogVisible: false,
            moneyDialogVisible: false,
            memberDialogVisible: false,
            editmemberDialogVisible: false,
            // 编辑成员表单
            editMemberDialogForm: {},

            editTaskDialogForm: {},
            editTaskDialogVisible: false,

            editWorkDialogForm: {},

            editMoneyDialogVisible: false,
            editMoneyDialogForm: {},
            // 记住编辑的坐标
            editIndex: '',

            // 新增工作任务弹框表单
            workDialogForm: {},
            // 成员弹框表单
            memberDialogForm: {},
            // 资金弹框表单
            moneyDialogForm: {}
        };
    },
    watch: {
        editInfo() {
            this.init()
        }
    },
    methods: {
        // 初始化
        init() {
            this.baseInfoForm = this.editInfo.reportBasicInfo;
            this.memberData = this.editInfo.reportMemberList;
            this.workData = this.editInfo.reportWorkList;
            for(let i =0;i<this.workData.length;++i){
                this.workData[i].startTime= moment(this.workData.startTime).format('YYYY-MM-DD');
                this.workData[i].endTime = moment(this.workData.endTime).format('YYYY-MM-DD');
            }
            this.moneyData = this.editInfo.reportMoneyList;
        },
        // 告诉父组件返回页面
        back() {

            this.$emit('func1');

        },
        async addReport() {
            let reportVo = {
                reportBasicInfo: this.baseInfoForm,
                reportMemberList: this.memberData,
                reportWorkList: this.workData,
                reportMoneyList: this.moneyData
            };
            console.log(reportVo);
            await reportFormsApi.updateReport(1,this.editInfo.reportBasicInfo.id,reportVo).then((res) => {
                this.$message.success('更改成功！');
                this.$emit('func1');
            });
        },

        //————————————————————————————————————————————————————————————————————————————————————
        // 弹出新增成员
        addMemberDialog() {
            this.memberDialogForm = {};
            this.memberDialogVisible = true;
        },
        // 取消添加成员
        cancelAddMember() {
            this.memberDialogForm = {};
            this.memberDialogVisible = false;
        },
        deleteMember(id) {
            this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    for (let i = 0; i < this.memberData.length; ++i) {
                        if (id == this.memberData[i].number) {
                            this.memberData.splice(i, 1);
                        }
                    }

                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        saveMember() {
            this.memberData.push(this.memberDialogForm);
            this.memberDialogVisible = false;
        },
        editMember(id) {
            this.editMemberDialogForm = {};
            for (let i = 0; i < this.memberData.length; ++i) {
                if (id == this.memberData[i].number) {
                    this.editIndex = i;
                    this.editMemberDialogForm = {
                        number: this.memberData[i].number,
                        name: this.memberData[i].name
                    };
                }
            }
            this.editmemberDialogVisible = true;
        },
        saveEditMember() {
            this.memberData[this.editIndex] = {
                number: this.editMemberDialogForm.number,
                name: this.editMemberDialogForm.name
            };
            this.editmemberDialogVisible = false;
        },
        cancelEditMember() {
            this.editMemberDialogForm = {};
            this.editmemberDialogVisible = false;
        },
        // 弹出新增工作任务窗口
        addtaskDialog() {
            this.workDialogForm = {};
            this.workDialogVisible = true;
        },
        // 取消添加新增工作
        cancelAddTask() {
            this.workDialogForm = {};
            this.workDialogVisible = false;
        },
        saveTask() {
            this.workDialogForm.startTime = moment(this.workDialogForm.startTime).format('YYYY-MM-DD');;
            this.workDialogForm.endTime = moment(this.workDialogForm.endTime).format('YYYY-MM-DD');;
            this.workData.push(this.workDialogForm);
            this.workDialogVisible = false;
        },
        editTask(id) {
            this.editTaskDialogForm = {};
            for (let i = 0; i < this.workData.length; ++i) {
                if (id == this.workData[i].number) {
                    this.editIndex = i;
                    this.editTaskDialogForm = {
                        number: this.workData[i].number,
                        name: this.workData[i].name,
                        type: this.workData[i].type,
                        startTime: this.workData[i].startTime,
                        endTime: this.workData[i].endTime,
                        manager: this.workData[i].manager
                    };
                }
            }
            this.editTaskDialogVisible = true;
        },
        saveEditTask() {
            this.editTaskDialogForm.startTime = moment(this.editTaskDialogForm.startTime).format('YYYY-MM-DD');;
            this.editTaskDialogForm.endTime = moment(this.editTaskDialogForm.endTime).format('YYYY-MM-DD');;
            this.workData[this.editIndex] = this.editTaskDialogForm;
            this.editTaskDialogVisible = false;
        },
        cancelEditTask() {
            this.editTaskDialogForm = {};
            this.editTaskDialogVisible = false;
        },
        deleteTask(id) {
            this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    for (let i = 0; i < this.workData.length; ++i) {
                        if (id == this.workData[i].number) {
                            this.workData.splice(i, 1);
                        }
                    }
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 添加资金窗口
        addMoneyDialog() {
            this.moneyDialogForm = {};
            this.moneyDialogVisible = true;
        },
        cancelAddMoney() {
            this.moneyDialogForm = {};
            this.moneyDialogVisible = false;
        },
        // 删除资金
        deleteMoney(id) {
            this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    for (let i = 0; i < this.moneyData.length; ++i) {
                        if (id == this.moneyData[i].number) {
                            this.moneyData.splice(i, 1);
                        }
                    }
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 资金部分
        saveMoney() {
            this.moneyData.push(this.moneyDialogForm);
            this.moneyDialogVisible = false;
        },
        editMoney(id) {
            this.editMoneyDialogForm = {};
            for (let i = 0; i < this.moneyData.length; ++i) {
                if (id == this.moneyData[i].number) {
                    this.editIndex = i;
                    this.editMoneyDialogForm = {
                        number: this.moneyData[i].number,
                        financeName: this.moneyData[i].financeName,
                        financeMoney: this.moneyData[i].financeMoney
                    };
                }
            }
            this.editMoneyDialogVisible = true;
        },
        cancelEditMoney() {
            this.editMoneyDialogForm = {};
            this.editMoneyDialogVisible = false;
        },
        saveEditMoney() {
            this.moneyData[this.editIndex] = {
                number: this.editMoneyDialogForm.number,
                financeName: this.editMoneyDialogForm.financeName,
                financeMoney: this.editMoneyDialogForm.financeMoney
            };
            this.editMoneyDialogVisible = false;
        }
    }
};
</script>

<style  scoped>
.header-content {
    padding: 15px;
}
.header-card {
    background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);
    height: 45px;
    line-height: 45px;
}
div /deep/ .el-card__header {
    padding: 0;
}
.title {
    border: 1px #bcbcbc;
    width: 50%;
    margin: 0 auto;
}
.card {
    border-radius: 15px;
    width: 50%;
    margin: 0 auto;
}
.drawer-card {
    padding: 100px 100px;
}
.inner-drawer-card {
    border: 2px #dddddd solid;
}
</style>
